/* 
引用方式：
    <script src="./WSContextmenu.js" type="text/javascript"></script>
*/

/*
使用方式：
<script>
$("body").addContextMenu({
        id:"menu1",
        items:[{
            text:"新增" ,
            click:function(){
                console.log(666);
            }
        },{
            text:"删除",
            click:function(){
                console.log(777);
            }            
        }]
    });
</script>
*/ 

function $(selector){
    return document.querySelectorAll(selector);
    //NodeList
}                                              
    //------专门将NodeList转换成数组Array
NodeList.prototype.toArray=function(){
    return Array.prototype.slice.call(this);
}

NodeList.prototype.addContextMenu=function(menuConfig){
    // 在某一个元素上面添加某一些右键菜单
    var ul = document.createElement("ul");//先创建一个ul标签
    ul.id = menuConfig.id;//把外面定义的id传入到ul的id中
    ul.classList.add("rightMenu");//在ul上面添加定义好的css样式

    //----------添加里面的每一项li------------
    menuConfig.items.forEach(function(item,index,a){//遍历items里面的每一个一级项
        var li = document.createElement("li");//创建一个li
        li.innerText=item.text;//把每个一级项中的text的属性值传入li中
        //------事件绑定开始--------------
        Object.keys(item).filter(function(_item,_index,_a){//Object.keys(item)返回一级项中的所有属性名
            // .filter()返回数组中符合条件的元素
            //typeof检测变量的类型
            return typeof item[_item]=="function";//返回变量的类型是function的项
        }).forEach(function(_item,_index,_a){//遍历检测出来是function的项
            li.addEventListener(_item,item[_item]);//把方法绑定在li上面
        });
        //------事件的绑定结束------------------
        ul.appendChild(li);//把绑定好事件的li添加到ul里面
    });

    //-------把创建好的ul菜单添加到网页当中去--------
    //document.querySelector("body").appendChild(ul);
    document.body.appendChild(ul);

    //-------开始对每一个选定的元素添加右键菜单事件----------
    this.toArray().forEach(function(item,index,a){//this指向当前绑定的事件绑定者
        item.addEventListener("contextmenu",function(event){//给每一个绑定者添加一个右击事件
            event=window.event||event;
            //------把之前所有的显示的右键菜单都隐藏掉--------
            $(".rightMenu").toArray().forEach(function(item,index,a){
                item.style.display="none";//把每一个ul都变成隐藏状态
            });
            //-----阻止事件的默认行为-------
            event.preventDefault();
            //-----把当前的菜单显示出来---------
            var rightMenu = document.getElementById(menuConfig.id);//找到当前定义id的ul
            //修改弹出的地方
            rightMenu.style.left=event.x+"px";
            rightMenu.style.top=event.y+"px";
            rightMenu.style.display="block";  //权重1000

            event.stopPropagation();   //停止事件传播
            event.cancelBubble=true;   //停止事件冒泡

        });
    });

    //---------右键菜单显示结束--------------------------------

    //左击关闭右键菜单,在整个页面上面绑定左键关闭
    document.addEventListener("click",function(){   
        $(".rightMenu").toArray().forEach(function(item,index,a){
            item.style.display="none";  //权重1000
            })
    });

}